{% extends "cmdb/index.html" %}
{% block title %}用户菜单管理{% endblock %}
{% block style %}
    <link type="text/css" rel="stylesheet" href="/static/css/ui.jqgrid.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/jquery-ui-1.7.1.custom.css" />
{% endblock %}
{% block breadcrumb  %}
    <ul class="breadcrumb">
                            <li>
                                <i class="ace-icon fa fa-home home-icon"></i>
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <i class="ace-icon fa fa-home home-icon"></i>
                                <a href="#">菜单管理</a>
                            </li>
                            <li class="active">户菜单管理</li>
                        </ul><!-- /.breadcrumb -->
{% endblock %}
{% block page-header %}
<div class="page-header">
    <h1>
        Dashboard
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
        菜单管理 &amp;用户菜单管理
        </small>
        </h1>
</div><!-- /.page-header -->
{% endblock %}

{% block content %}
<div id="mytable">                        
 <table class="table table-striped" id="gridtable" width="100%" border="0.5">
   <thead>  
    <tr>
    <th><input type="checkbox" name="check" id="all"/> </th>
    <th>ID</th>                    
    <th>用户名</th>              
    <th>菜单列表</th>            
    </tr>    
    </thead> 
{% for i in posts  %}                
    <tr> 
    <td><input   type="checkbox" name="check_box" value="{{ i.id }}" /> </td>
   <td class="active" >{{ i.id }}</td>
    <td class="success" >{{ i.user }}</td>
    <td class="warning">{{ i.menus_show }}</td>
  </tr>
   {% endfor %}
    </table>                                                                                                                                                                             
</div>    
    
 <div id="gridPager">
          <input  class="btn btn-default" type="button" id="add" value="添加" />
           <input class="btn btn-warning" type="button" id="edit" value="编辑" />
         <input class="btn btn-danger" type="button" id="delete" value="删除" />
      
         </div>

<div class="modal fade" id="mymodal"  >
    <div class="modal-dialog" style="width:520px;">
        <div class="modal-content">
            <p><button class="close" type="button" data-dismiss="modal">×</button></p>
                <hr />
                <p id="label_for_edit"  name="label_modal" class="text-center">aaaa</p>
                <!-- 模态弹出窗内容 -->
         <!-- <div class="modal-body">
            <textarea rows="2" cols="50">在这里输入回复</textarea>
          
         </div> -->
         <form id="myformid"  class="form-horizontal" method="POST" role="form"  onSubmit="return false;">
          <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
          <input type="hidden" name="id" value="">
          <div class="form-group"></div>
{#                    <label for=用户名: class="col-sm-3 control-label">用户名:</label>#}
{#                    <input id="edit_username" name="edit_username" type="text" value="" >#}
                    {% for field in form %}
          <div class="form-group"></div>
          <label for={{ field.label }} class="col-sm-3 control-label">{{ field.label }}</label>
          <div class="col-sm-8">{{ field }} </div>
         {{ field.errors }}
     {% endfor %}

        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">

                            <button type="submit" class="btn btn-success" onclick="postform()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button  id="btn2" type="button" class="btn btn-primary"   data-dismiss="modal">关闭</button>
                        </div>
                        </div>
        </form>  
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->

{% endblock %}

    {% block scripts %}
        <script  type="text/javascript" src="/static/js/bootstrap.min.js"></script>
       
    <script type="text/javascript">
    function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}

function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

    function postform(){
       var baseurl="{% url url_name  %}?&r="+Math.random();
       option=getCookie('option');
       var url = baseurl+"&option="+option;
        //postdata=$('#myformid').serialize()
       //此处处理菜单问题 不能直接提交,必须将数据在前端处理一次

                var user = $('#id_user').val();
                var menus = [];
                $('input[name^="checkbox_menu"]:checked').each(function () {
                    menus.push($(this).val());
                });
                menus_show = menus.join(",");
{#                alert(menus_show);#}
                postdata = {id: user, csrfmiddlewaretoken: "{{csrf_token}}", menus_show: menus_show, user: user};

       $.ajax({
                cache: false,
                type: "POST",
                url:url,
                data:postdata,// 你的formid
                async: false,
                dataType: "json",
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    alert(data.msg);
                    delCookie('pageper');

                    $("#mymodal").modal('hide');
                    var url="{% url url_name  %}?&r="+Math.random();
                    window.location.href=url;
                 }
            })
    }

$(document).ready(function() {
    //window.onload=onload;


    $('#mySelect').change(function(){
        var per=$(this).children('option:selected').val();
        delCookie('pageper');
        setCookie('pageper',per);
        var url="{% url url_name   %}?&r="+Math.random();
        window.location.href=url;
        });


    $("#add").click(function () {
        $('p[name="label_modal"]').html("添加菜单");
{#        $('input').attr("value","");#}
        $('input[name="csrfmiddlewaretoken"]').attr("value","{{csrf_token}}");
        $("#mymodal").modal('show');
        setCookie('option','add');
    });





    //编辑对应的js操作
    $("#edit").click(function () {
        var len = $('input[name="check_box"]:checked').length;

        if (len>1){
            alert("一次只能编辑一个");
            return false;
        }
        else if  (len==0){
            alert("你还没有选中");
            return false;
        }
        var chk_value =[];
        $('input[name="check_box"]:checked').each(function(){
            usertd = $(this).parent().parent().find("td:eq(2)").html();
        chk_value.push($(this).val());
        });
        var server_id=chk_value[0];
        $('p[name="label_modal"]').html("编辑用户菜单")
        //$('input').attr("value",""); //删除form表单的信息
        $('input[name="csrfmiddlewaretoken"]').attr("value","{{csrf_token}}"); //
        var url= "{% url url_name  %}?option=query&r="+Math.random();
        setCookie('option','update');
        $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {serverid:server_id,csrfmiddlewaretoken:"{{csrf_token}}",option:"query"},
                    dataType: "json",
                    async:false,
                    success: function(ret){
                        $('input[name="edit_username"]').attr("value",usertd);
                        $('input[name="edit_username"]').attr("readonly",true);
                         var strs= new Array();
                         strs=ret.menus_show.split(",");
                         $('input[name="id"]').attr("value",ret.id);
                         for (i=0;i<strs.length ;i++ ) {
                             var p = strs[i];
                             $("input[type='checkbox']").each(function () {
                                 if ($(this).val() == p) {
                                     $(this).attr("checked", true);
                                 }
                             });
                         }
                        },
                    error: function (msg) {
                        alert("Connection error");
                        return  false;
                    }
                }

        );
        setCookie('option','update'); 
        $("#mymodal").modal('show');

    });



    $("#delete").click(function () {
        var chk_value =[];
        $('input[name="check_box"]:checked').each(function(){
        chk_value.push($(this).val());
        });
        var server_id=chk_value.join('.');
        var len = $("input:checkbox:checked").length;
        if  (len<1){
            alert("你还没有选中");
            return false;
        }
        var result=confirm("是否删除id为:["+server_id+"]主机");
        if (! result){
            return false;
        }
        var url= "{% url url_name  %}?option=del&r="+Math.random();
         $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {serverid:server_id,csrfmiddlewaretoken:"{{csrf_token}}",option:"delete"},
                    dataType: "json",
                     success: function(ret){
                        delCookie('pageper');
                          var url="{% url url_name  %}?&r="+Math.random();
                          window.location.href=url;
                     },
                     error: function (msg) {
                          delCookie('pageper');
                          var url="{% url url_name  %}?&r="+Math.random();
                          window.location.href=url;
                    }
                }
                  )
    });



    $("#all").click(function(){
        if(this.checked){
            $("[name=check_box]:checkbox").prop("checked", true);
        }else{
            $("[name=check_box]:checkbox").removeAttr("checked");
        }
     });

    $("#search_btn").click(function(){

    });
});
    </script>
        {% endblock %}
